<template>
    <div class="ad-video-list" v-loading="loading">
        <div class="input-box">
            <el-date-picker
                @change="getList(1)"
                v-model="date"
                :clearable="true"
                type="daterange"
                style="width:280px"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-select
                style="margin-left:10px;width:240px"
                v-model="gameId"
                clearable
                filterable
                @change="getList(1)"
                :filter-method="filterMethod"
                :loading="gameLoading"
                placeholder="请输入并选择游戏">
                <el-option
                    v-for="item in gameList"
                    :key="item.gameid"
                    :label="item.appName"
                    :value="item.gameid">
                    <span style="float: left">
                        <span>{{ item.appName }}</span>
                        <span v-if="item.status === -1" style="color:red;font-size:12px;margin:0 5px;">下架</span>
                    </span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.gameid }}</span>
                </el-option>
            </el-select>
            <el-select
                @change="getList(1)"
                style="width:100px;margin-left:10px"
                v-model="status">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="投放中" :value="1"></el-option>
                <el-option label="已下架" :value="0"></el-option>
            </el-select>
            <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
            <el-button type="success" class="btn" @click="goVideoDetail(0)">新建</el-button>
        </div>

        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    width="100"
                    prop="bid"
                    label="id">
                </el-table-column>
                <el-table-column
                    width="180"
                    label="广告">
                    <template slot-scope="scope">
                        <div style="padding: 10px 0;">
                            <videoBox v-if="scope.row.link" :url="scope.row.link" :time="scope.row.duration" :img="scope.row.cover"/>
                            <div v-else>暂无视频</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="180"
                    label="关联游戏">
                    <template slot-scope="scope">
                        <div v-if="scope.row.gameId" @click="goGameDetail(scope.row)" class="table-btn">{{scope.row.gameName || '-'}}</div>
                        <div v-else>{{scope.row.gameName || '-'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150"
                    label="广告来源">
                    <template slot-scope="scope">
                        <span>{{scope.row.videoSource || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="200"
                    label="投放时间">
                    <template slot-scope="scope">
                        <div v-if="scope.row.startTime === '2020-01-01 00:00:00' && scope.row.endTime === '2999-01-01 23:59:59'" style="text-align:center;">无限期</div>
                        <div v-else-if="scope.row.startTime && scope.row.endTime" style="text-align:center;">
                            <div>{{scope.row.startTime}}</div>
                            <div>至</div>
                            <div>{{scope.row.endTime}}</div>
                        </div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="曝光量">
                    <template slot-scope="scope">
                        <span>{{scope.row.expose || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="完播量">
                    <template slot-scope="scope">
                        <span>{{scope.row.playOver || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="下载量">
                    <template slot-scope="scope">
                        <span>{{scope.row.downloadOver || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="安装量">
                    <template slot-scope="scope">
                        <span>{{scope.row.install || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="100"
                    fixed="right"
                    label="状态">
                    <template slot-scope="scope">
                        <div style="color: #F56C6C;" v-if="scope.row.adStatus === 0">已下架</div>
                        <div style="color:#67C23A;" v-else>投放中</div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.adStatus === 0"><el-button @click="changeVideoStatus(scope.row, 1)" type="text" size="small">上架</el-button></div>
                        <div v-else><el-button @click="changeVideoStatus(scope.row, 0)" type="text" size="small" style="color:red;">下架</el-button></div>
                        <!-- 查看详情 -->
                        <div><el-button @click="goVideoDetail(scope.row.bid)" type="text" size="small">查看详情</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            date: [],
            status: 1,
            keyword: '', // 关键词
            gameId: '', // 游戏查询
            gameList: [],
            gameLoading: false,
            tableData: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false,
            userInfo: {}
        }
    },

    activated () {
        this.getUserInfo()
        // 更好的缓存数据
        if (this.listParams) {
            this.keyword = this.listParams.keyword || this.keyword
            this.gameId = this.listParams.gameId || this.gameId
            this.gameList = this.listParams.gameList || this.gameList
        }
        this.getList(this.pageNum)
    },

    methods: {
        getUserInfo () {
            let userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
        },

        // 获取列表
        async getList (pageNum) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            this.listParams = {
                pageNum: pageNum - 1,
                pageSize: this.pageSize,
                status: this.status
            }

            if (this.date && this.date.length) {
                this.listParams.startTime = this.date[0] + ' 00:00:00'
                this.listParams.endTime = this.date[1] + ' 23:59:59'
            }
            if (this.keyword) {
                this.listParams.keyword = this.keyword
            }
            if (this.gameId) {
                this.listParams.gameId = this.gameId
            }
            let res = await this.$http.get('/ad/videoPlays', {
                params: this.listParams
            })
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
                this.listParams.gameList = this.gameList
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        // 查询游戏
        filterMethod (res) {
            clearTimeout(this.timerId)
            if (!res) {
                this.gameLoading = false
                return
            }
            this.gameLoading = true
            this.timerId = setTimeout(() => {
                this.getgameList(res)
            }, 1000)
        },
        async getgameList (keyword) {
            let params = {
                keyword,
                pkgType: 0,
                pageIndex: 1,
                pageNum: 100
            }
            let res = await this.$http.post('/game/findGames', params)
            if (res.code === '0') {
                this.gameList = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.gameLoading = false
        },

        // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getList(1)
        },

        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },

        // 更改视频状态
        changeVideoStatus (item, status) {
            let msg = '是否将id为 ' + item.bid + ' 视频广告'
            if (status === 1) {
                msg += '上架？'
            } else {
                msg += '下架？'
            }
            this.$confirm(msg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(async () => {
                    let params = {
                        bid: item.bid,
                        status
                    }
                    let res = await this.$http.post('/ad/updateStatus', params)
                    if (res.code === '0') {
                        item.adStatus = status
                        this.$message({
                            type: 'success',
                            message: '修改成功'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.desc
                        })
                    }
                }).catch(() => {
            })
        },

        // 查看广告视频详情
        goVideoDetail (id) {
            if (id) {
                this.$router.push({
                    path: '/ad/videoDetail',
                    query: {
                        id
                    }
                })
            } else {
                this.$router.push('/ad/videoDetail')
            }
        },

        // 查看游戏详情
        goGameDetail (item) {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id: item.gameId
                }
            })
            window.open(href, '_blank')
        }
    }
}
</script>

<style lang="scss" scoped>
    .ad-video-list {
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            /deep/ td {
                padding: 0;
            }
            .user-icon {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 5px;
                vertical-align: top;
            }
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
            .point {
                display:inline-block;
                width:10px;
                height:10px;
                border-radius: 50%;
                background-color:#67C23A;
                margin-right:3px;
            }
            .red-point {
                background-color: #F56C6C;
            }
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
